<template>
  <div class="codes">
    <div class="outermostMargin">
      <img style="width: 100%;" :src="bannerurl" v-if="bannerurl" />

      <div class="listBox">
        <van-list>
          <div v-for="(item, index) in list" :key="index" style="max-height: 200px;">
            <!-- 通讯录行主体部分 -->
            <div class="mainBox" v-if="$route.query.title == '网格帮帮团'">
              <div class="leftP" @click="skipDetail(item, '网格帮帮团')">
                <div class="headp">
                  <img
                    style="width: 100px;"
                    :src="item.attachList && item.attachList.length ? picUrl(item.attachList[0].uploadPath): require('../../assets/ggg/3.png')"
                  />
                </div>
                <div class="text">
                  <div class="namePhone">
                    <p class="itemname">{{item.teamName}}</p>
                  </div>
                  <div class="posArea">
                    <p class="item">发布时间：{{item.updateTime.substring(0, 10)}}</p>
                    <p class="item">发布单位：<span class="fbdw">{{item.regionName}}</span></p>
                    <p class="item">负责人： {{item.name}}</p>
                    <p class="item">联系电话： {{item.phone}}</p>
                    <!-- <p class="item">团体名称： {{item.serviceContent}}</p> -->
                  </div>
                </div>
              </div>
              <img
                class="phone"
                src="../../assets/treasureChest/thiredP/phoneIcon765.png"
                @click="callOut(item.phone)"
              />
            </div>
            <div class="mainBox" v-if="$route.query.title == '我也要出力'">
              <div class="leftP">
                <div class="headp">
                  <img
                    style="width: 100px;"
                    :src="item.attachList && item.attachList.length ? picUrl(item.attachList[0].uploadPath): require('../../assets/ggg/5.png')"
                  />
                </div>
                <div class="text">
                  <div class="namePhone">
                    <p class="itemname">
                      {{item.name}}
                      <span
                        style="color: #999;font-weight: 300;"
                      >({{item.sex == '1' ? '男' : '女'}},{{item.age}}岁)</span>
                    </p>
                  </div>
                  <div class="posArea">
                    <p class="item">联系方式：{{item.phone}}</p>
                    <p class="item">服务志愿： {{getv(item.volunteerService)}}</p>
                    <p class="item">特长： {{item.specialty}}</p>
                    <p class="item">发布单位：<span class="fbdw">{{item.regionName}}</span></p>
                  </div>
                </div>
              </div>
              <img
                v-if="item.phone"
                class="phone"
                src="../../assets/treasureChest/thiredP/phoneIcon765.png"
                @click="callOut(item.phone)"
              />
            </div>
            <div
              class="mainBox"
              v-if="$route.query.title == '格格帮办'"
              @click="skipDetail(item, '格格帮办')"
            >
              <div class="leftP">
                <div class="headp">
                  <img
                    style="width: 100px;"
                    :src="item.attachList && item.attachList.length ? picUrl(item.attachList[0].uploadPath) : require('../../assets/ggg/3.png')"
                  />
                </div>
                <div class="text">
                  <div class="namePhone">
                    <p class="itemname">{{item.title}}</p>
                  </div>
                  <div class="posArea">
                    <p class="item">发布时间：{{item.updateTime.substring(0, 10)}}</p>
                    <p class="item">发布单位：<span class="fbdw">{{item.regionName}}</span></p>
                    <p class="item">备注： {{item.remark}}</p>
                    <!-- <p class="item" v-html="item.description"></p> -->
                  </div>
                </div>
              </div>
              <!-- <img
                class="phone"
                src="../../assets/treasureChest/thiredP/phoneIcon765.png"
                @click="callOut(item.servicePhone)"
              />-->
            </div>

            <div class="mainBox" v-if="$route.query.title == '就近入格'">
              <div class="leftP" @click="toDet(item)">
                <div class="headp">
                  <img
                    style="width: 100px;"
                    :src="item.attachList && item.attachList.length ? picUrl(item.attachList[0].uploadPath): require('../../assets/ggg/1.png')"
                  />
                </div>
                <div class="text">
                  <div class="namePhone">
                    <p class="itemname">{{item.title}}</p>
                  </div>
                  <div class="posArea">
                    <p class="item" style="color: green;">{{item.prompt}}</p>
                    <p class="item" v-if="item.uploadName">上传人： {{item.uploadName}}</p>
                    <p class="item" v-if="item.remark">描述： {{item.remark}}</p>
                    <p class="item">发布时间：{{item.updateTime.substring(0, 10)}}</p>
                    <p class="item">发布单位：<span class="fbdw">{{item.regionName}}</span></p>
                  </div>
                </div>
              </div>
              <!-- <img
                class="phone"
                src="../../assets/treasureChest/thiredP/phoneIcon765.png"
                @click="callOut(item.servicePhone)"
              />-->
            </div>
            <van-divider />
          </div>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
// const isDev = process.env.NODE_ENV === 'development';
const isDev = false;
export default {
  name: "ServiceDet",
  data() {
    return {
      det: {},
      list: [],
      bannerurl: "",
      types: [{
        text: '网格巡逻',
        value: '1'
      },{
        text: '网格跑腿',
        value: '2'
      },{
        text: '网格调节',
        value: '3'
      },{
        text: '网格宣传',
        value: '4'
      },{
        text: '其他',
        value: '99'
      },]
    };
  },
  created() {
    this.setTitle(this.$route.query.title);
    this.getData();
    this.slow.getBanner(this.$route.query.title, url => {
      this.bannerurl = url;
    });

    // this.slow.getDictionaryValus("activityType").then(ret => {
    //   this.types = ret;
    // });
    
  },
  methods: {
    getv(key){
      let name = '';
      this.types.forEach(e => {
        if(e.value == key){
          name = e.text;
        }
      })
      return name;
    },
    callOut(phoneNum) {
      this.$dialog
        .confirm({
          title: "拨打电话",
          message: "是否拨号：" + phoneNum
        })
        .then(() => {
          window.location.href = "tel://" + phoneNum;
        })
        .catch(() => {});
    },
    skipDetail(item, title) {
      this.$router.push({
        path: "/Xiangqing",
        query: {
          title: title,
          description: item.description,
          content: JSON.stringify(item)
        }
      });
    },
    getData() {
      switch (this.$route.query.title) {
        case "就近入格":
          let url = "caseNearest_load.html";
          if (!isDev) {
            url = "caseNearest/load_public";
          }
          this.post(url, {
            dataAreaCode: localStorage.getItem("dataAreaCode"),
            pageIndex: 1,
            pageSize: 100
          }).then(r => {
            if (r.array && r.array.length) {
              this.list = r.array;
            }
          });
          break;
        case "格格帮办":
          let url2 = "gridDeputy_load.html";
          if (!isDev) {
            url2 = "gridDeputy/load_public";
          }
          this.post(url2, {
            dataAreaCode: localStorage.getItem("dataAreaCode"),
            pageIndex: 1,
            pageSize: 100
          }).then(r => {
            if (r.array && r.array.length) {
              this.list = r.array;
            }
          });
          break;
        case "网格帮帮团":
          let url3 = "gridBlock_load.html";
          if (!isDev) {
            url3 = "gridBlock/load_public";
          }
          this.post(url3, {
            dataAreaCode: localStorage.getItem("dataAreaCode"),
            pageIndex: 1,
            pageSize: 100
          }).then(r => {
            if (r.array && r.array.length) {
              this.list = r.array;
            }
          });
          break;
        case "我也要出力":
          let url4 = "meHelp_load.html";
          if (!isDev) {
            url4 = "meHelp/load_public";
          }
          this.post(url4, {
            dataAreaCode: localStorage.getItem("dataAreaCode"),
            pageIndex: 1,
            pageSize: 100
          }).then(r => {
            if (r.array && r.array.length) {
              this.list = r.array;
            }
          });
          break;
        default:
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.codes {
  .header {
    padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;

    position: absolute;
    width: $sm-img-per-max;
    height: 21px;
    background: $sm-bg-color;
    z-index: 2;

    display: flex;
    flex-direction: row nowrap;
    justify-content: flex-start;
    .backIcon {
      position: absolute;
      white-space: nowrap;
      height: $sm-icon-px-md;
      z-index: 4;

      .iconImage {
        height: $sm-icon-px-md;
        width: $sm-icon-px-md;
        transform: rotateY(180deg);
      }
    }

    .theme {
      position: absolute;
      font-weight: bold;
      width: $sm-img-per-max;
      text-align: center;
      white-space: nowrap;
      z-index: 3;
    }
  }

  .outermostMargin {
    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    overflow: auto;
    height: 100vh;
    // margin: 41px 0 0 0;

    .carousel {
      margin: 0;
      padding: 0;
      height: $sm-img-per-xm;
      width: $sm-img-per-max;

      background-image: url("../../assets/convenientService/thirdPage/problemSerBg.jpg");
      background-repeat: no-repeat;
      background-size: cover;

      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      color: $sm-text-color-inverse;
      font-size: $sm-font-sizeVH-base;
    }

    .listBox {
      background-color: $sm-bg-color;
      display: flex;
      flex-direction: column;

      .mainBox {
        padding: $sm-spaceing-block-base $sm-spaceing-block-base 0
          $sm-spaceing-block-base;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;

        position: relative;
        .phone {
          display: block;
          width: 40px;
          height: 40px;
          position: absolute;
          right: 15px;
          bottom: 0px;
        }

        .leftP {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          .text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .namePhone {
              display: flex;
              flex-direction: row;
              justify-content: space-between;

              .itemname {
                margin: 0 0 $sm-spaceing-block-mini $sm-spaceing-block-mini;
                font-weight: bold;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
                color: $sm-color-title;
                line-height: $sm-font-size-xxl;
              }

              .item {
                margin: 0 $sm-spaceing-block-mini $sm-spaceing-block-mini
                  $sm-spaceing-block-mini;
                font-size: $sm-font-sizeVH-sm;
                color: $sm-text-color-li;
              }
            }

            .posArea {
              display: flex;
              flex-direction: column;

              .item {
                margin: $sm-spaceing-block-xm;
                font-size: $sm-font-sizeVH-sm;
                color: $sm-text-color-li;
              }
              .fbdw{
                background: #e5b03e;
                padding: 3px 6px;
                border-radius: 12px;
                color: #ffffff;
                font-size: $sm-font-size-sm;
              }
            }
          }
        }
      }
    }
  }
}
</style>